<template>
  <div class="load-more" :style="{marginTop: margin}">
    <el-button class="ladda-button" @click="addData()" :disabled="disabled"  v-if="!isMore" :size="size">
      <!--<span class="ladda-spinner">-->
      <!--<i class="fa fa-spinner fa-spin"></i>-->
      <!--</span>-->
      <span  class="ladda-label">点击查看更多</span>
    </el-button>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
    props: {
        isMore: {
            type: Boolean
        },
        loading: {
            type: Boolean
        },
        margin: {
            type: String,
            default: '20px'
        },
        size: {
            type: String,
            default: 'small'
        }
    },
    computed: {
        disabled () {
            return this.loading;
        }
    },
    methods: {
        addData () {
            //        this.$emit('on-change', {'page': 1, 'sortName': '', 'tagId': id})
            this.$emit('on-change');
        }
    }
};
</script>

<style lang='scss' rel="stylesheet/scss">
.load-more{
  margin-top: 20px;
  text-align: center;
  .ladda-button{
    padding: 12px 18px;
    cursor: pointer;
    color: #81848e;
    border: 1px solid #c1c9db;
    background: #feffff;
    box-shadow: 0 2px 4px 0 #e6e9f0;
    border-radius: 2px;
    &:active,&:focus{
      outline: none;
    }
  }
}
</style>
